---
title: "AG Grid Modules"
description: "Reduce your application bundle size by cherry-picking grid features. Use the module selector to select the features you want to use and generate the code."
---

Reduce your application bundle size by cherry-picking grid features using AG Grid modules, generate registration code with the module selector, and validate your setup with the validation module.

{% if isFramework("javascript") %}
{% note %}
If you are using the UMD bundle you do not need to register modules as this is already done automatically.
{% /note %}
{% /if %}

## Overview

AG Grid Modules allow you to reduce the bundle size of your application by only including the modules you want to use. Use the [Module Selector](#selecting-modules) tool below to select the modules you want to use and generate the correct module registration code.

Alternatively, if you are not concerned about bundle size and you want access to every feature in Community / Enterprise, use [Bundles](#bundles) to include all Community / Enterprise modules.

## Bundles

The `AllCommunityModule` bundle contains all of the modules available in AG Grid Community. The `AllEnterpriseModule` bundle contains all of the modules available in Community and Enterprise. Registering one of these bundles replicates the behaviour of the package versions of AG Grid prior to version 33:

```js
// Import ModuleRegistry and the required module
import {
    ModuleRegistry,
    AllCommunityModule, // or AllEnterpriseModule
} from 'ag-grid-community';

// Register the module
ModuleRegistry.registerModules([
    AllCommunityModule, // or AllEnterpriseModule
]);
```

If you are using [Integrated Charts](./integrated-charts/) or [Sparklines](./sparklines-overview/), then you need to provide the relevant module from AG Charts to `AllEnterpriseModule`, for example:

```js
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';
import { ModuleRegistry } from 'ag-grid-community';
import { AllEnterpriseModule,} from 'ag-grid-enterprise';

// All Enterprise Features, with Integrated Charts and Sparklines 
ModuleRegistry.registerModules([
    AllEnterpriseModule.with(AgChartsEnterpriseModule),
]);
```

## Selecting Modules

To work out which modules are required, select the features of the grid that you are using below. This will then provide the relevant registration code.

{% moduleMappings /%}

{% note %}The code snippet above shows registering modules globally. It is also possible to [Provide Modules To Individual Grids](#providing-modules-to-individual-grids){% /note %}

## Development Validations

The `ValidationModule` adds helpful console warnings/errors that can help identify bad configuration during development. When using Modules it is recommended to only include it in your development build to ensure your production build is as small as possible.

```js
// via process.env.NODE_ENV
if(process.env.NODE_ENV !== 'production') {
    ModuleRegistry.registerModules([ValidationModule]);
}
```

 If using the bundles (`AllCommunityModule`/`AllEnterpriseModule`), the `ValidationModule` is included by default.

## Registering AG Grid Modules

When including AG Grid in your application via modules it is your responsibility to register the required modules with the grid before it is instantiated. You can either register them globally or pass them individually to each grid instance.

### Providing Modules Globally

You can import and register modules globally, but you need to ensure that this is done before **_any_** grids are instantiated. Any modules registered globally will be available to all grids.

* Import Modules
* Register Modules

A real-world example might be that we wish to use the `Client-Side Row Model` (the default row model) together with the `CSV`, `Excel` and `Master/Detail` features.

We need to register the grid modules we wish to use via the `ModuleRegistry`.

```js
import { ModuleRegistry, ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

ModuleRegistry.registerModules([
    ClientSideRowModelModule,
    CsvExportModule,
    ExcelExportModule,
    MasterDetailModule
]);
```

{% if isFramework("react") %}
{% note %}
If using server-side rendering, modules need to be registered on the client and not the server.
{% /note %}
{% /if %}

### Providing Modules To Individual Grids

Modules can be registered directly with individual grids. Modules registered directly with a grid will _only_ be available to that grid. When a grid is instantiated it uses both globally and individually registered modules.

Individually registering modules is most useful when you have multiple grids in your application with varying feature requirements. It may also lead to smaller bundle sizes if your application uses lazy loading / code splitting.

The steps required are:

* Import Modules
* Pass to Grid

Using the same real-world example from above (the `Client-Side Row Model` together with the `CSV`, `Excel` and `Master/Detail` features), how we register the modules is now different.

{% if isFramework("javascript") %}
We pass the modules to createGrid via the `modules` property of the `params`.
{% /if %}

{% if isFramework("javascript") %}
```js
import { createGrid, ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

createGrid(<dom element>, gridOptions, { modules: [
    ClientSideRowModelModule,
    CsvExportModule,
    ExcelExportModule,
    MasterDetailModule
]});
```
{% /if %}

{% if isFramework("angular") %}
```js
import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular'
import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

@Component({
    selector: 'grid-example',
    standalone: true,
    imports: [AgGridAngular],
    template: `<ag-grid-angular [modules]="modules" 
        <!-- other properties -->
    />`
})
export class GridExample {
    modules: Module[] = [
        ClientSideRowModelModule,
        CsvExportModule,
        ExcelExportModule,
        MasterDetailModule
    ];

    // ... rest of component ...
}
```
{% /if %}

{% if isFramework("react") %}
We pass the modules to the `modules` prop:
{% /if %}

{% if isFramework("react") %}
```js
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { AgGridReact } from 'ag-grid-react';
import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

const GridExample = () => {
    // ... rest of component ...

    return (
        <div style={{height: 400, width: 900}}>
            <AgGridReact
                // Pass Modules to this individual grid
                modules={[
                    ClientSideRowModelModule,
                    CsvExportModule,
                    ExcelExportModule,
                    MasterDetailModule
                ]}
                // ... other properties
            />
        </div>
    );
};
```
{% /if %}

{% if isFramework("vue") %}
```js
import { createApp } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import { ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

data() {
    return {
        // ... other properties
        modules: [
            ClientSideRowModelModule,
            CsvExportModule,
            ExcelExportModule,
            MasterDetailModule
        ]
    }
}
<ag-grid-vue
    :modules="modules"
    // ... other properties
/>
```
{% /if %}

The following example shows how you can configure individual grids using a combination of shared Global registrations as well as individual grid module registration. Note the following:

* Globally registered modules:  `[ClientSideRowModelModule, ColumnMenuModule, ContextMenuModule]`.
* Left Grid individually registers: `[ClipboardModule, CsvExportModule, SetFilterModule]`
* Right Grid individually registers: `[ CsvExportModule, ExcelExportModule, NumberFilterModule, TextFilterModule]`

To see the difference in features open the context menu and open the column filter:

* The left grid has options for clipboard and CSV export.
* The right grid has options for CSV and Excel export.
* The left grid uses the Set Filter while the right grid uses the Text Filter or Number Filter depending on the cell data type.

{% gridExampleRunner title="Grids with Individual Registration" name="individual-registration" /%}

### Is Module Registered

To check if a specific module has been registered with a grid instance use the `api.isModuleRegistered(moduleName)` method.

```js
// Check if the SetFilter module is registered
const isRegistered = api.isModuleRegistered('SetFilterModule');
```

{% apiDocumentation source="grid-api/api.json" section="miscellaneous" names=["isModuleRegistered"] /%}


{% if isFramework("angular") %}
## Angular CLI Builders

The Angular CLI supports multiple builders as outlined in ([Building Angular apps](https://angular.dev/tools/cli/build)). It is recommended to compare the bundle size produced by each of the builders as the results can vary depending on the application. 
{% /if %}